<template>
  <div class="pager" v-if="total > 0">
    <!-- <button class="whiteBtn btnWidth" 
            @click.prevent="handleChange(page-1)">
            上一页
      </button> -->
    <button
      @click.prevent="handleChange(n)"
      :class="page == n ? 'blueBtn' : 'whiteBtn'"
      v-for="(n, i) in numbers"
      :key="i"
    >
      {{ n }}
    </button>
    <!-- <button  class="whiteBtn btnWidth" 
            @click.prevent="handleChange(page+1)"
            >下一页
     </button> -->
    <!-- <span class="fs14">跳转到</span> -->
    <!-- <input  type="text" v-model="skipPage" @keyup.enter="handleChange(page)">
        <span class="fs14">页</span>  -->
    <!-- <button  class="blueBtn blueBtnWidth fs14" 
            @click.prevent="handleChange(skipPage)">
            跳转
      </button> -->
  </div>
</template>

<script>
export default {
  props: {
    page: {
      // 当前页码
      type: Number,
      default: 1
    },
    total: {
      // 总数数据量
      type: Number,
      default: 0
    },
    limit: {
      // 每页显示多少条数据 面容量
      type: Number,
      default: 10
    },
    panelNumber: {
      // 最多显示 多少个数字页码
      type: Number,
      default: 6
    }
  },
  data() {
    return {
      num: null,
      skipPage: null,
    }
  },
  computed: {
    pageNum() {
      return Math.ceil(this.total / this.limit)
    },
    minNum() {
      var n = Math.ceil(this.page - this.panelNumber / 2)
      if (n < 1) {
        n = 1;
      }
      return n;
    },
    maxNum() {
      var n = this.minNum + this.panelNumber - 1;
      if (n > this.pageNum) {
        n = this.pageNum
      }
      return n
    },
    numbers() {
      var n = []
      for (let i = this.minNum; i <= this.maxNum; i++) {
        n.push(i)
      }
      return n
    },
  },
  methods: {
    handleChange(newPage) {
      if (newPage == this.page) {
        return
      }
      if (newPage < 1) {
        newPage = 1
      }
      else if (newPage > this.pageNum) {
        newPage = this.pageNum
      }
      this.$emit("pageChange", newPage)
    }
  }
}
</script>

<style scoped lang="scss">
.pager {
    display: inline-block;
  button {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 18px;
    margin: 0 10px;
    cursor: pointer;
  }
  .blueBtn {
    background: #0054f7;
    color: #ffffff;
    cursor: not-allowed;
  }
  .whiteBtn {
    background: #eef3f9;
    color: #0054f7;
  }
}
</style>